<template>
  <div class="config">
    <div v-if="type === configType.orid">
      <!--网格和背景图配置组件-->
      <config-grid :flow-graph="flowGraph" />
    </div>
    <div v-if="type === configType.node">
      <!--node的配置-->
      <config-node :id="id" :flow-graph="flowGraph" />
    </div>
    <div v-if="type === configType.edge">
      <!--edge边的配置-->
      <config-edge :id="id" :flow-graph="flowGraph" />
    </div>
  </div>
</template>

<script>
import configGrid from './ConfigGrid'
import configNode from './ConfigNode'
import configEdge from './ConfigEdge'

export default {
  name: 'Index',
  components: {
    configGrid,
    configNode,
    configEdge
  },
  props: {
    // 子组件接收flowGraph
    flowGraph: {
      type: null, // 实例对象竟然是null
      default: null,
      required: true
    }
  },
  data() {
    return {
      configType: {
        orid: 'orid',
        node: 'node',
        edge: 'edge'
      },
      type: 'orid',
      id: ''
    }
  },
  watch: {
  },
  updated() {
    // 注意：
    // 如果想给flowGraph绑定事件，必须要再new FlowGraph()初始化完成之后
    // 此处父组件在mounted时初始化，所以为其绑定事件要在其后，选用 updated
    this.binkEvent()
  },
  methods: {
    binkEvent() {
      console.log('绑定事件')
      const { graph } = this.flowGraph
      graph.on('blank:click', () => {
        this.type = this.configType.orid
      })
      graph.on('cell:click', ({ cell }) => {
        this.type = (cell.isNode() ? this.configType.node : this.configType.edge)
        this.id = cell.id
      })
    }
  }
}
</script>

<style lang="scss" scoped>

//.config :global(.ant-row) {
//  line-height: 32px;
//  margin: 8px 0;
//  :global(.result) {
//    background: #eee;
//    color: #333333;
//    padding: 3px 7px;
//    border-radius: 10px;
//    display: inline-block;
//    font-size: 12px;
//    margin-left: 8px;
//    line-height: 1.25;
//    margin-top: 8px;
//  }
//}
</style>
